<template>
  <div class="samples-info-box box">
    <el-row>
      <el-col :span="15">
        <el-row v-show="queryList.length>0" :gutter="10">
          <el-col
            ref="moreSearch"
            :lg="wrapperWidth"
            :class="{'samples-show-more':ismore}"
            class="samples-searchBar-wrapper"
          >
            <el-col v-for="(item,index) in queryList" :key="index" :lg="inputWidth_lg" :xl="inputWidth_xl">
              <el-input
                v-if="item.type==='input'"
                v-model="queryData[item.prop]"
                size="small"
                :placeholder="item.place"
                clearable
                class="samples-search-input"
              />
              <el-select
                v-else-if="item.type==='select'"
                v-model="queryData[item.prop]"
                size="small"
                :placeholder="item.place"
                clearable
              >
                <el-option v-for="i in item.options" :key="i.value" :label="i.label" :value="i.value" />
              </el-select>
            </el-col>
          </el-col>
          <el-col :lg="6">
            <el-button size="small" type="primary" plain class="samples-search-btn" @click="search">
              <i class="el-icon-search" />
            </el-button>
            <el-button
              v-show="moreShow"
              size="small"
              type="text"
              class="samples-search-btn samples-ismore-button"
              @click="more"
            >
              MORE
              <i class="samples-search-icon" :class="[ismore?'el-icon-arrow-up':'el-icon-arrow-down']" />
            </el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="9" class="samples-text-right">
        <slot />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    queryList: {
      type: Array,
      default: () => {
        return []
      }
    },
    queryData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data() {
    return {
      ismore: false,
      moreShow: false
    }
  },

  computed: {
    wrapperWidth() {
      if (this.queryList.length === 1) {
        return 8
      } else {
        return 18
      }
    },
    inputWidth_lg() {
      if (this.queryList.length < 4) {
        return 24 / this.queryList.length
      } else {
        return 8
      }
    },
    inputWidth_xl() {
      if (this.queryList.length < 4) {
        return 24 / this.queryList.length
      } else {
        return 6
      }
    }
  },

  created() {
    const screenWidth = document.body.clientWidth
    const length = this.queryList.length
    if (length > 4) {
      this.moreShow = true
    } else if (length > 3 && screenWidth <= 1280) {
      this.moreShow = true
    }
  },

  methods: {
    more() {
      this.ismore = !this.ismore
      const ref = this.$refs.moreSearch.$el
      if (this.ismore) {
        ref.style.height = ref.scrollHeight + 'px'
      } else {
        ref.style.height = '32px'
      }
    },
    drop(show) {
      this.dropShow = show
    },
    search() {
      this.$emit('search')
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
